<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var jsonstr = '[{"X":164,"Y":99},{"X":163,"Y":99},{"X":162,"Y":99},{"X":160,"Y":99},{"X":157,"Y":99},{"X":154,"Y":98},{"X":150,"Y":97},{"X":146,"Y":96},{"X":140,"Y":96},{"X":134,"Y":96},{"X":128,"Y":97},{"X":123,"Y":100},{"X":118,"Y":103},{"X":116,"Y":105},{"X":114,"Y":108},{"X":113,"Y":111},{"X":112,"Y":113},{"X":112,"Y":115},{"X":112,"Y":117},{"X":112,"Y":119},{"X":113,"Y":122},{"X":114,"Y":124},{"X":118,"Y":125},{"X":121,"Y":128},{"X":124,"Y":130},{"X":129,"Y":132},{"X":133,"Y":132},{"X":137,"Y":134},{"X":140,"Y":134},{"X":144,"Y":134},{"X":147,"Y":135},{"X":151,"Y":135},{"X":154,"Y":135},{"X":157,"Y":135},{"X":159,"Y":133},{"X":162,"Y":131},{"X":164,"Y":128},{"X":165,"Y":126},{"X":167,"Y":123},{"X":167,"Y":119},{"X":167,"Y":116},{"X":167,"Y":112}]';

var path1 = JSON.parse(jsonstr);
var path2 = new Array();

function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');
 
  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 3;
  ctx.fillStyle = "#eee";
  ctx.fillRect(0,0,900,600);


  // Non uniform scaling (y direction)
  ctx.strokeStyle = "#0cf";
  ctx.save()
  drawPath(ctx, path1);
  scalePath(path1, 1.5, 1, 112);
  drawPath(ctx, path1);
  scalePath(path1, 2.5, 1, 112);
  drawPath(ctx, path1);

  createLine(512, 60);
  drawPath(ctx, path2);
  scalePath(path2, 1.5, 1, 512);
  drawPath(ctx, path2);

  createLine(100, 60);
  drawPath(ctx, path2);
  scalePath(path2, 1.5, 1, 100);
  drawPath(ctx, path2);

  for(var i=0; i<0; i++) {
    ctx.translate(-22.5,0);
    ctx.scale(1.2,1);
    drawPath(ctx, 160, 100);
  }
  //ctx.translate(-50,0);
  //ctx.scale(2,1);
  //drawPath(ctx, 50, 150);
  //drawSpirograph(ctx,22,6,5);

  //ctx.translate(-50,0);
  //ctx.scale(2,1);
  //drawPath(ctx, 50, 150);

  //ctx.translate(100,0);
  //ctx.scale(1,0.75);
  //drawSpirograph(ctx,22,6,5);
  ctx.restore();

  }else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
 
function drawSpirograph(ctx,R,r,O){
  var x1 = R-O;
  var y1 = 0;
  var i  = 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  do {
    if (i>20000) break;
    var x2 = (R+r)*Math.cos(i*Math.PI/72) - 
             (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
    var y2 = (R+r)*Math.sin(i*Math.PI/72) - 
             (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
    ctx.lineTo(x2,y2);
    x1 = x2;
    y1 = y2;
    i++;
  } while (x2 != R-O && y2 != 0 );
  ctx.stroke();
}

function drawPath(ctx, path) {
  var i = 0;
  var newx, newy;
  var len = path.length;
  if(len > 0) {
    ctx.beginPath();
    ctx.moveTo(path[0].X, path[0].Y);
    for(i=1; i < len; i++) {
      ctx.lineTo(path[i].X, path[i].Y);
      ctx.stroke();
    }
    ctx.closePath();
  }
}

function scalePath(path, sx, sy, xmin) {
  var len = path.length;
  //var dx = path[0].X*(sx-1);
  var dx = xmin*(sx-1);
  for(var i=0; i < len; i++) {
    path[i].X = (path[i].X * sx) - dx;
    path[i].Y = path[i].Y * sy;
  }
}

function createLine(start, num) {
  path2 = [];
  var j = 50;
  for(var i=start, j=20; i<(start+num); i++,j++) {
    var pt = {
      'X': i,
      'Y': j
    }
    path2.push(pt);
  }
}

</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas" width="900" height="400"></canvas>
</body>
</html>
